CSS property - float

Zwevende elementen

Bronnen

Chris Coyier, All About Floats, July 8, 2009

De box van een zwevend element wordt langs de linker- of rechterrand van het moederelement geplaatst en de boxen van andere elementen ervoor of erna kunnen hun plek ernaast krijgen.

Met behulp van de float eigenschap in CSS kunnen alle elementen zwevend gemaakt worden. Je moet wel de breedte van het element expliciet vast leggen met de width eigenschap. Een uitzondering voor dat laatste geldt de replaced elementen, die van zichzelf al een bepaalde breedte hebben.

In het volgende voorbeeld wordt voor een inline element de float eigenschap ingesteld.

We laten de afbeelding links zweven van de headings en de paragrafen die erop volgen:

<figure style="float: left">
    <img src="images/Stromae.jpg" alt="foto van Stromae"><br>
    <figcaption>Standaard 7 september 2014: Showbizznet</figcaption>
</figure>

Je kan de stijlregel ook in het style element van het head element opnemen of in een extern CSS bestand plaatsen.

Een element met de float eigenschap ingesteld op de waarden left of right, wordt een element op op blokniveau. Een eventueel gebruikte display eigenschap wordt genegeerd.

De box van een zwevend element wordt compleet weergegeven, inclusief padding, border en margin. De margin van een zwevend element en aangrenzende elementen schuiven niet in elkaar

Om de box van twee elementen op blokniveau naast elkaar te plaatsen, moet je voor beide elementen de float eigenschap instellen. Je kan eventueel margin-left eigenschap gebruiken om wat witruimte tussen de twee boxen te creëren.

Stoppen met zweven

Neem aan dat je in het voorbeeld hierboven alleen de titel rechts wil laten zweven van de foto. Er is plaats genoeg naast de foto om de titel en enkele paragrafen ernaast te laten zweven. Dus moet je die standaard mogelijkheid blokkeren door aan de eerste paragraaf na de titel de eigeschap clear: left toe te kennen.

p.clear {
     clear: both;
 }

p.clear {
     clear: left;
 }
p.clear {
     clear: right;
 }

In ons voorbeeld passen we de css aan om alleen de titel naast de foto te laten zweven:

<figure style="float: left">
    <img src="images/Stromae.jpg" alt="foto van Stromae"><br>
    <figcaption>Standaard 7 september 2014: Showbizznet</figcaption>
</figure>
<h2>Hoe zou dat nu zitten? Is Stromae opgebrand? </h2>
<p style="clear: left;">Zo te zien valt het wel mee. Zijn tourschema zit, om te beginnen, nog vol tot eind december, en daar staan belangrijke concerten <br>
        op in gebieden die hij wil veroveren. Want opgepast: Stromae is mega in Frankrijk en België, maar in andere landen blijft zijn <br>
        succes vooralsnog beperkt. Er is nog werk om van onze maestro een wereldster te maken.
</p>

Met dit als resultaat:

Oefening

Opdracht

We maken een wireframe/mockup/tekening te maken van de pagina lay-out.

Onze lay-out moet responsief zijn. Dat wil zeggen dat de lay-out zich moet aanpassen aan het soort browser en toestel waarop de website bekeken wordt.

De header van de pagina samen het artikel moeten precies in het browservenster passen. Dus de hoogte van de pagina-header en het artikel is tesamen 100% van het browservenster. Hetzelfde geldt voor de breedte.

De pagina-footer staat net onder het browservenster. De pagina-footer bevet geen wezenlijke informatie en het maakt niet uit dat de gebruiker moet scrollen om de pagina-footer informatie te kunnen zien.

Vervolgens stellen we een lijst op van de postioneren elementen.